<template>
  <div class="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-50 flex">
    <Nav></Nav>

    <div class="flex-1 h-screen flex flex-col items-center justify-center p-4">
      <!-- 成功图标 -->
      <div class="mb-8 animate-bounce-slow">
        <img src="@/assets/images/success.png" alt="success" class="w-[160px] h-[160px] object-contain" />
      </div>

      <!-- 标题 -->
      <h1 class="text-3xl font-bold text-gray-800 mb-4">创建成功</h1>
      <p class="text-gray-500 mb-8">您的智能测试已经准备就绪</p>

      <!-- 测试信息卡片 -->
      <div
        class="bg-gradient-to-br from-orange-400 to-yellow-400 rounded-3xl p-[2px] mb-12 w-full max-w-2xl transform hover:scale-[1.02] transition-all duration-300">
        <div class="bg-white rounded-3xl p-8 backdrop-blur-xl">
          <div class="text-center space-y-3 mb-8">
            <h2 class="text-xl font-semibold text-gray-800">
              {{ analysisStore.paperTitle }}
            </h2>
            <div class="text-gray-500 flex items-center justify-center gap-2">
              <el-icon>
                <Calendar />
              </el-icon>
              <span>{{ formatDate(paperData?.created_at) }}</span>
            </div>
          </div>

          <!-- 测试信息标签 -->
          <div class="flex flex-wrap justify-center gap-3">
            <el-tag class="!rounded-full !px-4 !py-2 !text-sm" effect="light" type="warning">
              <el-icon class="mr-1">
                <Monitor />
              </el-icon>
              {{ paperData?.type === 1 ? '能力测评' : '单元测试' }}
            </el-tag>
            <el-tag class="!rounded-full !px-4 !py-2 !text-sm" effect="light" type="warning">
              <el-icon class="mr-1">
                <Collection />
              </el-icon>
              {{ paperData?.subject_name }}
            </el-tag>
            <el-tag class="!rounded-full !px-4 !py-2 !text-sm" effect="light" type="warning">
              <el-icon class="mr-1">
                <User />
              </el-icon>
              {{ paperData?.grade_name }}
            </el-tag>
            <el-tag class="!rounded-full !px-4 !py-2 !text-sm" effect="light" type="warning">
              <el-icon class="mr-1">
                <Calendar />
              </el-icon>
              {{ paperData?.term_type_name }}
            </el-tag>
            <el-tag class="!rounded-full !px-4 !py-2 !text-sm" effect="light" type="warning">
              <el-icon class="mr-1">
                <Reading />
              </el-icon>
              {{ paperData?.version_name }}
            </el-tag>
            <el-tag class="!rounded-full !px-4 !py-2 !text-sm" effect="light" type="warning">
              <el-icon class="mr-1">
                <List />
              </el-icon>
              {{ paperData?.question_total }}题
            </el-tag>
          </div>
        </div>
      </div>

      <!-- 操作按钮 -->
      <div class="flex flex-wrap justify-center gap-4">
        <el-button type="primary"
          class="!rounded-full !px-8 !py-3 !text-base !font-medium !bg-gradient-to-r !from-blue-500 !to-blue-600 !border-none"
          @click="goToTest">
          <el-icon class="mr-2">
            <Edit />
          </el-icon>开始答题
        </el-button>
        <el-button class="!rounded-full !px-8 !py-3 !text-base !font-medium" @click="goToAnalysis">
          <el-icon class="mr-2">
            <View />
          </el-icon>查看解析
        </el-button>
        <el-button class="!rounded-full !px-8 !py-3 !text-base !font-medium" @click="goToPrint">
          <el-icon class="mr-2">
            <Printer />
          </el-icon>打印试卷
        </el-button>
        <el-button class="!rounded-full !px-8 !py-3 !text-base !font-medium" @click="handleShare">
          <el-icon class="mr-2">
            <Document />
          </el-icon>分享试卷
        </el-button>
      </div>
    </div>
  </div>

  <!-- 分享弹窗 -->
  <el-dialog v-model="shareDialogVisible" title="分享试卷" width="460px" :show-close="true" class="share-dialog" center>
    <div class="p-4">
      <div class="bg-gray-50 rounded-lg p-4 mb-4">
        <p class="text-gray-500 text-sm mb-2">分享链接</p>
        <div class="flex items-center gap-2">
          <el-input v-model="shareLink" readonly class="!bg-white">
          </el-input>
          <el-button type="primary" @click="copyLink" class="!flex-shrink-0">
            复制链接
          </el-button>
        </div>
      </div>
      <div class="text-gray-400 text-sm">
        <!-- <p>· 链接有效期：7天</p> -->
        <p>· 任何人获得链接后均可查看试卷</p>
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
import { ElMessage } from 'element-plus'
import { getShareLink } from '@/api/common' // 需要添加
import Nav from "@/components/nav/index.vue";
import { useAnalysisStore } from '@/stores/analysis'
import { ref, onMounted, onUnmounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import {
  CircleCheckFilled,
  Calendar,
  Monitor,
  Collection,
  User,
  Reading,
  List,
  Edit,
  View,
  Printer,
  Document
} from '@element-plus/icons-vue';

const route = useRoute();
const router = useRouter();
const analysisStore = useAnalysisStore();
const paperData = ref(null)

// 格式化日期的函数
const formatDate = (dateString) => {
  if (!dateString) return ''
  const date = new Date(dateString)
  return `${date.getFullYear()}.${String(date.getMonth() + 1).padStart(2, '0')}.${String(date.getDate()).padStart(2, '0')}`
}

onMounted(() => {
  if (!analysisStore.paperData) {
    router.replace('/analysis')
    return
  }
  paperData.value = analysisStore.paperData
})

// 跳转答题页面
const goToTest = () => {
  console.log("paper_id", paperData.id)
  router.push({
    name: 'analysisAnswerQuestions',
    query: {
      paper_id: paperData.value.id
    }
  });
};

// 跳转解析页面
const goToAnalysis = () => {
  router.push({
    name: 'analysisAnswerPaper',  // 修改为正确的路由名称
    query: {
      paper_id: paperData.value.id
    }
  });
};

// 跳转打印页面
const goToPrint = () => {
  router.push({
    name: 'analysisPrintPaper',  // 修改为正确的路由名称
    query: {
      paper_id: paperData.value.id
    }
  });
};

// 分享相关
const shareDialogVisible = ref(false)
const shareLink = ref('')

// 处理分享
const handleShare = async () => {
  try {
    shareDialogVisible.value = true
    const res = await getShareLink({ id: paperData.value.id })
    shareLink.value = import.meta.env.VITE_SHARE_BASE_URL?.trim() + res.share_code || ''
  } catch (error) {
    ElMessage.error('获取分享链接失败')
  }
}

// 复制链接
const copyLink = async () => {
  try {
    await navigator.clipboard.writeText(shareLink.value)
    ElMessage.success('链接已复制到剪贴板')
  } catch (error) {
    ElMessage.error('复制失败，请手动复制')
  }
}

onUnmounted(() => {
  // 清理数据
  analysisStore.clearPaperData()
})
</script>

<style scoped>
.animate-bounce-slow {
  animation: bounce 2s infinite;
}

@keyframes bounce {

  0%,
  100% {
    transform: translateY(-5%);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }

  50% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

.el-button {
  transition: all 0.3s;
}

.el-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

.el-tag {
  transition: all 0.3s;
}

.el-tag:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}
</style>